<template>
  <div class="el-main">
    <!-- 顶部搜索框 -->
    <div>
      <el-input placeholder="请输入内容" v-model="input2">
        <el-button slot="append" icon="el-icon-search"></el-button>
        <div></div>
      </el-input>
    </div>
    <!-- 酒类展示框 -->
    <div class="disflex">
      <div class="jiuwidt disflexcenter algncneter">
        <p>品牌</p>
      </div>

      <div>
        <el-row :gutter="10">
          <el-col
            v-for="(item, index) in liquor"
            :key="index"
            :xs="10"
            :sm="6"
            :md="4"
            :lg="4"
            :xl="2"
            class="hover"
            >{{ item }}</el-col
          >
          <!--  class="hover" -->
        </el-row>
      </div>

      <div class="jiuwidt disflexcenter algncneter">
        <p>更多</p>
      </div>
    </div>
    <!-- 综合 -->
    <div>
      <el-table
        :data="produck"
        style="width: 100%"
        :default-sort="{ prop: 'produck', order: 'ascending' }"
      >
        <el-table-column prop="overall"  label="综合" sortable width="180">
        </el-table-column>
        <el-table-column   prop="active"  label="人气" sortable width="180">
        </el-table-column>
        <el-table-column   prop="sales"  label="sales" sortable width="180">
        </el-table-column>
        <el-table-column  prop="newpro"   label="新品" >
        </el-table-column>
        <el-table-column   prop="price"  label="价格" sortable width="180">
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      ssss: "415456",
      input2: "",
      liquor: [
        "魅丽文化",
        "中信出版",
        "艺园",
        "悦读纪",
        "imobile",

        "中信出版",
        "艺园",
        "悦读纪",
        "imobile",

        "中信出版",
        "艺园",
        "悦读纪",
        "imobile",
      ],
      arrlen: 9,
      produck: [
        {
          overall: "还好",
          active: "还行",
          newpro: "看得过去",
          sales: "全球第三",
          price: "亲国",
        },
      ],
      width: 180,
    };
  },
  methods: {
    mouser: function () {
      console.log("565+444444");
    },
  },
};
</script>
<style  scoped>
.el-main {
  color: rgb(24, 24, 24);
}
/* 统一分布两边flex布局 */
.disflex {
  display: flex;
  justify-content: space-between;
}
/* 浮动排版 */
.floacent {
  display: flex;
  flex-wrap: wrap;

  max-width: 800px;
}
/* 文字换行 */
.tetxt {
  white-space: nowrap;
}
/* 统一居中对齐 */
.disflexcenter {
  display: flex;
  justify-content: center;
}
/* 统一垂直居中 */
.algncneter {
  align-items: center;
}
/* 统一文字大小 */
.fonsize {
}
/* 统一盒子宽度 */
.boxwidth {
}
/* 酒类框统一宽 */
.jiuwidt {
  width: 20vw;
}
/* 统一文本居中 */
.textalign {
  text-align: center;
}
/* 畅销品名字 */
.boomnane {
  /* width: 10%; */
  word-wrap: none;
}
/* 统一间距 */
.marleft {
  margin: 10px 10px;
}
/* 最小宽 */
.minw {
  width: 60px;
}
.hover:hover {
  color: red;
}
</style>